<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<jsp:useBean id="bdao" class="jwj8508.j2ee.basic.projectv8.dao.BoardDAO" scope="application" />

<%--검색유형 및 검색 값 처리 --%>
<c:set var="ftype" value="${ param.findtype }" />
<c:set var="fkey" value="${ param.findkey }" />
<%-- 검색 질의문 작성 --%>
<c:set var="qury" value="&findtype=${ ftype }&findkey=${ fkey }" />
<c:set var="burl" value="?action=list&cpage=" />

<c:set var="total" value="${ bdao.totalBoard(ftype, fkey) }" />
<c:set var="perpage" value="20" />
<c:set var="allpage" value="${ total / perpage }" />
<c:set var="allpage">
	<fmt:formatNumber type="number"	value="${allpage+0.5}" pattern="#" />
</c:set>

<c:set var="cpage" value="${ param.cpage }" />
<c:if test="${ empty cpage }"><c:set var="cpage" value="1" /></c:if>
<c:set var="startno" value="${ (cpage-1)*perpage }" />

<%-- 페이지 네비게이션 시작값 계산 --%>
<fmt:parseNumber var="startnav" value="${((cpage-1)/10)}" integerOnly="true"/>
<c:set var="startnav" value="${startnav*10+1}"/>

<%-- 게시물 번호 시작값 계산 --%>
<c:set var="startbno" value="${ total-(perpage*(cpage-1)) }" />

<style type="text/css">				
	table {	width: 70%;	margin: 0 auto;	border-collapse: collapse; table-layout: fixed; }
	th,td {	border: 1px solid black; padding: 10px; text-align: center;	}
	.bdtitle { text-align: left; white-space: nowrap; overflow: hidden;	text-overflow: ellipsis; }
	.cpage { font-size: 2em; font-weight: bold;	color: red; }
	.center { text-align: center; }
</style>
<div id="content">
	<h2>게시판</h2>			
	<table>
		<colgroup>
			<col style="width: 10%" />
			<col />
			<col style="width: 15%" />
			<col style="width: 15%" />
			<col style="width: 10%" />
		</colgroup>
		<tr> <!-- 검색창 시작 -->
			<td colspan="5" style="border: none; text-align: right;">
				<select name="findtype">
					<option value="">선택하세요</option>
					<option value="title">제목</option>
					<option value="uid">작성자</option>
					<option value="contents">본문</option>
					<option value="wdate">작성일</option>
				</select>
				<input type="text" name="findkey" />
				<button type="button" id="findbtn" >검색</button>				
			</td>
		</tr> <!-- 검색창 끝 -->
		<!-- 제목행 시작 -->
		<tr><th>번호</th><th>제목</th><th>작성자</th><th>작성일</th><th>조회</th></tr>
		<!-- 제목행 끝 -->		
		<!-- 본문행 출력 시작 -->
		<c:forEach var="b" items="${bdao.listBoard(startno, ftype, fkey) }">
		<tr>
			<td>${startbno }</td>
			<td class="bdtitle">
				<a href="?action=view&bdno=${b.bdno }">
					${b.title }
				</a>
			</td>
			<td>${b.uid }</td>
			<td>${b.wdate.substring(0, 10) }</td>
			<td>${b.reades }</td>
		</tr>
		<%-- 게시물 글번호 수정 --%>
		<c:set var="startbno" value="${ startbno-1 }" />
		</c:forEach>		
		<!-- 본문행 출력 끝 -->
	<tr>
		<td colspan="5" style="border: none; text-align: right;">
			<c:if test="${ not empty sessionScope.uid }">
				<button type="button" onclick="location.href='?action=write';">글쓰기</button>
			</c:if>
			<c:if test="${ empty sessionScope.uid }">
				<h4 style="color: red;">로그인하세요</h4>
			</c:if>
		</td>
	</tr>
	</table>
	<p class="center">
		<a href="${ burl }1${ qury }" title="처음 페이지로 이동합니다">처음</a>		
		<%-- 현재 페이지가 1이 아닌 경우에만 이전버튼 표시 --%>
		<%-- 이전버튼은 이전페이지로 이동할 수 있는 링크 제공 --%>
		<c:if test="${ cpage ne 1 }">
			<a href="${ burl }${ cpage-1 }${ qury }" title="이전 -1 페이지"> ◀ </a> 
		</c:if>		
		◁◁
		<%-- 페이지 네비게이션 출력 --%>
		<c:forEach var="p" begin="${ startnav }" end="${ startnav+9 }">
			<c:if test="${ p le allpage }">
				<%-- 맨 마지막 페이지 링크까지만 출력 --%>
				<c:if test="${ p eq cpage }"><span class="cpage"> ${ p } </span></c:if>
				<c:if test="${ p ne cpage }"><a href="${ burl }${ p }${ qury }"> ${ p } </a></c:if>
			</c:if>
		</c:forEach>
		<a href="${ burl }${cpage+1 }${ qury }" title="다음+1 페이지"> ▶ </a>		
		<a href="${ burl }${allpage }${ qury }" title="마지막 페이지"> 끝 </a>
	</p>
	
	<hr />
	<p>총 게시물 수 : ${ total }</p>
	<p>페이지당 게시물 수 : ${ perpage }</p>
	<p>총 페이지 수 : ${ allpage }</p>
	<p>현재 페이지 : ${ cpage }</p>
	<p>시작번호 : ${ startno }</p>
	<p>nav 시작번호 : ${ startnav }</p>
	<p>게시 글 시작번호 : ${ startbno }</p>
	<p>검색 유형 : ${ ftype }</p>
	<p>검색 값 : ${ fkey }</p>
</div> <!-- content -->

<script type="text/javascript">
	var findbtn = document.getElementById("findbtn");
	findbtn.onclick = function(){
		var ftype = document.getElementsByName("findtype")[0].value;
		var fkey = document.getElementsByName("findkey")[0].value;
		var url = "?action=list";
		var find = "&findtype=" + ftype + "&findkey=" + fkey;
		location.href = url + find;
	};
</script>